<template>
  <div class="home">
    <div class="data">
      <span>点击标记获取内容</span>
      <span>位置名：{{ data ? data.extData.name : '---' }}</span>
      <span>经纬度：{{ data ? data.position.lng : '---' }} , {{ data ? data.position.lat : '---' }}</span>
    </div>
    <div class="marker-btn">
      <i-button type="primary" @click="addMarker()">添加标记(id为5)</i-button>
      <i-button type="primary" @click="delMarker()">删除标记(id为5)</i-button>
      <i-button type="primary" @click="dragMarker()">开启拖拽(id为5)</i-button>
      <i-button type="primary" @click="undragMarker()">关闭拖拽(id为5)</i-button>
      <i-button type="primary" @click="adapt()">调整地图视野，包含所有点标记</i-button>
      <i-button type="primary" @click="changeCenter('flash')">改变地图中心点(闪现)</i-button>
      <i-button type="primary" @click="changeCenter('smoothMovement')">改变地图中心点(平移)</i-button>
    </div>
    <i-row :gutter="20">
      <i-col span="19">
        <LKmap ref="maps" :lnglats="lnglats" @showDetail="showDetail" @addSearchAddressList="addSearchAddressList"
          height="560px" />
      </i-col>
      <i-col span="5">
        <div class="map-search">
          <i-input prefix="ios-search" size="large" v-model="addressName" @input="search()" placeholder="请输入地名关键字"
            clearable />
          <div class="search-list" v-if="searchAddressList.length">
            <div class="list-item" v-for="address in searchAddressList" :key="address.id" @click="toAddress(address)">
              <div class="list-item-title">{{ address.name }}</div>
              <div class="list-item-content">{{ address.label }}</div>
            </div>
          </div>
          <p v-else class="search-empty">{{ searchMsg }}</p>
        </div>
      </i-col>
    </i-row>
  </div>
</template>

<script>
import LKmap from '@/components/LKmap.vue'
import _ from 'lodash'

export default {
  name: 'home-view',
  components: {
    LKmap
  },
  data() {
    return {
      // 初始标记点
      lnglats: [
        {
          id: 1,
          name: '龙湖·水晶郦城·禧苑',
          position: [106.494881, 29.604193],
          customIcon: true
        },
        {
          id: 2,
          name: '扬子江商务中心',
          position: [106.497881, 29.598181],
          customIcon: true
        },
        {
          id: 3,
          name: '佳居花园B区',
          position: [106.494439, 29.595963],
          customIcon: true
        },
        {
          id: 4,
          name: '重庆市中医院(南桥寺院部)',
          position: [106.480839, 29.591815],
          customIcon: true
        },
      ],
      // 标记点信息
      data: null,
      // 触发搜索函数
      searchFn: null,
      // 搜索关键字
      addressName: '',
      // 搜索列表
      searchAddressList: [],
      searchMsg: '请输入关键字搜索...',
    }
  },
  methods: {
    showDetail(e) {
      this.data = e.target.options
    },
    // 添加标记
    addMarker() {
      this.$refs.maps.addMarker([{
        id: 5,
        name: '重庆冉家坝圣地阳光小区',
        position: [106.495609, 29.597792]
      }])
    },
    // 删除标记
    delMarker() {
      this.$refs.maps.removeMarker(5)
    },
    // 开启拖拽
    dragMarker() {
      this.$refs.maps.draggable(5)
    },
    // 开启拖拽
    undragMarker() {
      this.$refs.maps.unDraggable(5)
    },
    // 调整地图视野
    adapt() {
      this.$refs.maps.setFitView()
    },
    // 改变地图中心点
    changeCenter(type) {
      this.$refs.maps.setCenter([106.480839, 29.591815], type)
    },
    // 搜索
    search() {
      if (!this.addressName) {
        this.searchAddressList = []
        return this.searchMsg = '请输入关键字搜索...'
      }
      this.searchFn()
    },
    // 显示搜索地址列表
    addSearchAddressList(list) {
      if (!list || !list.length) return this.searchMsg = '啥子地方哟，搜都搜不到  (￣_￣|||)'
      this.searchAddressList = list.map(item => item.properties)
    },
    // 点击搜索地址列表某一项，跳转放该位置并添加标点
    toAddress(address) {
      this.addressName = address.name
      let position = [address.center.lon, address.center.lat]
      // 删除id为6标点 传参 false代表不显示提示信息
      this.$refs.maps.removeMarker(6, false)
      // 添加标点
      this.$refs.maps.addMarker([{
        id: 6,
        name: address.name,
        position,
      }])
      // 跳转到该位置
      this.$refs.maps.setCenter(position, 'smoothTranslation')
      // 点标记弹跳
      this.$refs.maps.markerBounce(6)
    }
  },
  mounted() {
    // 搜索函数添加防抖效果
    this.searchFn = _.debounce(() => this.$refs.maps.searchAddress(this.addressName), 300)
  }
}
</script>
<style scoped lang="scss">
.home {
  margin: 0 10px;

  /* 控制滚动条滑块的颜色、圆角、内阴影等 */
  ::-webkit-scrollbar-thumb {
    background-color: #a8a8a8;
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgb(34, 193, 195);
    background: linear-gradient(0deg,
        rgba(114, 124, 245) 0%,
        rgb(45, 215, 253) 100%);
  }
}

.data {
  display: flex;
  justify-content: center;
  font-size: 16px;
  color: #000;
  margin: -10px 0 10px 0;

  span {
    margin-left: 10px;
  }
}

.marker-btn {
  margin-bottom: 20px;
  text-align: center;

  ::v-deep .ivu-btn {
    margin-right: 10px;
  }
}

.map-search {
  .search-list {
    height: 520px;
    overflow: auto;

    .list-item {
      padding: 10px 0 6px 0;
      border-bottom: 1px solid #d6d7d9;
      cursor: default;

      &:hover {
        background-color: #f5f5f5;
      }

      .list-item-title {
        font-size: 15px;
        color: #575f71;
      }
    }

    .list-item-content {
      margin-top: 4px;
      color: #a9a9a9;
    }
  }

  .search-empty {
    font-size: 16px;
    color: #c5c8ce;
    margin: 10px;
  }
}
</style>
